<template>
  <div>
    <el-table :data="tableData" :border="border" class="subTable">
      <el-table-column
        v-for="(item, index) in tabColumnList"
        :prop="item.prop"
        :label="item.label"
        :key="index">
      </el-table-column>
    </el-table>
    <el-pagination
      small
      background
      @prev-click="subPrevPage()"
      @next-click="subNextPage()"

      :total="page.total"
      :page-size="page.pageSize"
      :current-page="page.currentPage"
      :page-count="page.pageCount"
      layout="->,slot,prev,next">
      <span>{{ page.currentPage }}/{{ pageCount }}</span>
    </el-pagination>
  </div>
</template>
<script>
export default {
  props: {
    page: {
      type: Object,
      default: () => ({
        pageSize: 1,
        currentPage: 1,
        total: 0
      })
    },
    tableData: {
      type: Array,
      default: () => []
    },
    tabColumnList: {
      type: Array,
      default: () => []
    },
    border: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    pageCount() {
      const {pageSize, total} = this.page
      if(total % pageSize == 0){
        return parseInt(total / pageSize)
      }else{
        return parseInt(total / pageSize) + 1
      }
      
    }
  },
  methods: {
    subPrevPage() {
      this.page.currentPage--
      this.$emit('subPrevPage', this.page)
    },
    subNextPage() {
      this.page.currentPage++
      this.$emit('subNextPage', this.page)
    },
    handleCurrentChange(val) { // 点击页码数字跳转
      this.page.currentPage = val;
      this.$emit('handleCurrentChange', this.page)
    },
  }
}
</script>
<style lang="scss" scoped>
.subTable{
              font-size: 10px;
            }
</style>
